<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <title>产出详情</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            font-family: 'PingFang-SC-Regular', 'PingFang-SC-Medium,微软雅黑', Helvetica, Arial, sans-serif;
            line-height: 100%
        }

        html,
        body {
            height: 100%;
            background: #F8F8F8;
            font-size: 0.26rem
        }

        a:link,
        a:visited,
        a:hover,
        a:active {
            text-decoration: none;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            color: #262626;
            text-align: center;
            display: block
        }

        a {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

        p {
            margin-inline-start: 0px;
            margin-inline-end: 0px;
        }

        input,
        button,
        textarea,
        select {
            outline: none;
            border: none;
            margin: 0;
            -webkit-tap-highlight-color: rgba(240, 240, 240, 0);
            padding: 0;
        }

        .width100 {
            width: 100%;
        }

        .container {
            height: 100%;
            background: #F8F8F8;
            color: #262626;
            padding: 0.3rem;
        }

        .textCenter {
            text-align: center
        }

        img {
            font-size: 0;
        }

        .content {
            height: 100%;
            overflow: hidden;
            overflow-y: scroll;
            border-radius: 0.04rem;
        }

        .content::-webkit-scrollbar {
            width: 0px;
            height: 0px;
            background-color: transparent;
        }

        /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
        .content::-webkit-scrollbar-track {
            background-color: #fff;
            border-radius: 0px;
            box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
        }

        /*定义滚动条轨道 内阴影+圆角*/
        .content::-webkit-scrollbar-thumb {
            background-color: #fff;
            border-radius: 0px;
            box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
        }

        /*定义滑块 内阴影+圆角*/
        .content .p1 {
            font-size: 0.3rem;
        }

        .content .p1 .right {
            float: right;
            font-size: 0.24rem;
            color: #ADADAD;
            line-height: 0.42rem;
        }

        .content .p1 .totalPower {
            color: #F1514F;
            padding-left: 0.15rem;
        }

        .clm_total {
            font-size: 0.28rem;
            padding-left: 0.2rem;
            position: relative;
        }

        .clm_total:before {
            content: '';
            display: block;
            position: absolute;
            z-index: 1;
            width: 0.07rem;
            height: 0.25rem;
            background: #ffd203;
            left: 0rem;
            bottom: 0.025rem;
        }

        .clm_total .power {
            padding-left: 0.2rem;
            line-height: 0.3rem;
        }

        .jcishide {
            display: none;
        }

        .content>div {
            border-radius: 0.08rem;
        }

        .clomn-content>.p1 {
            font-size: 0.24rem;
            padding-top: 0.32rem;
            display: flex;
            display: -webkit-flex;
            justify-content: space-between;
        }

        .clomn-content>.p1>span:last-child {
            font-family: 'PingFang-SC-Bold';
            padding-right: 0.3rem;
            position: relative
        }

        .clomn-content>.p1>span:last-child:after {
            content: '';
            display: block;
            width: 0.2rem;
            height: 0.09rem;
            background: url("../../image/xialax.png");
            background-size: 100% 100%;
            position: absolute;
            right: 0;
            top: 50%;
            z-index: 1;
            margin-top: -0.04rem;
        }

        .clomn-content>.p2 {
            display: -webkit-flex;
            display: flex;
            justify-content: flex-end;
            color: #ADADAD;
            font-size: 0.2rem;
            padding-top: 0.1rem;
            padding-right: 0.3rem;
        }

        .clomn-content>.p3 {
            color: #999999;
            font-size: 0.22rem;
            background: #FAFAFA;
            border-radius: 0.08rem;
            padding: 0.16rem 0.22rem;
            margin-top: 0.25rem;
        }

        .clomn-content>.p3>.p1 {
            display: -webkit-flex;
            display: flex;
            justify-content: space-between;
            font-size: 0.22rem;
        }

        .clomn-content>.p3>.p2 {
            display: -webkit-flex;
            display: flex;
            justify-content: flex-end;
            font-size: 0.2rem;
            padding-top: 0.15rem;
        }

        .clomn {
            margin-top: 0.25rem;
            background: #fff;
            padding: 0.3rem 0.28rem;
            border: 0;
            padding-top: 0.37rem;
        }

        .content>.clomn:first-child {
            margin-top: 0;
        }

        .clomn-content>.div1 {
            display: -webkit-flex;
            display: flex;
            justify-content: space-between;
            font-size: 0.22rem;
            padding-top: 0.4rem;
        }

        .clomn-content>.div1>div>p:first-child {
            padding-bottom: 0.16rem;
        }

        .clomn3 .nottopradio {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }

        .clomn3 .notbotradio {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }

        .clomn-content>.div1 .green {
            color: #1BC188
        }

        .clomn-content>.div1 .red {
            color: #EA4343
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="content">
            <div class="clomn">
                <p class="p1" style="overflow: hidden">
                    <span>总算力</span>
                    <span class="totalPower">T</span>
                    <span class="right rightDate"></span>
                </p>
                <div class="clomn-content">
                    <p class="p1">
                        <span>总产出</span>
                        <span><span class="span1"></span>BTC</span>
                    </p>
                    <p class="p2">￥<span class="span2"></span></p>
                    <div class="p3">
                        <p class="p1">
                            <span>产出冻结</span>
                            <span><span class="span3"></span>BTC</span>
                        </p>
                        <p class="p2 ">￥<span class="span4"></span></p>
                    </div>
                </div>
            </div>
            <div class="clomn">
                <p class="clm_total">
                    可回购算力<span class="power canGetPower span6">T</span>
                </p>
                <div class="clomn-content">
                    <div class="div1">
                        <div>
                            <p>合约持有算力</p>
                            <p class="jc1"></p>
                        </div>
                        <div>
                            <p>竞猜消耗算力</p>
                            <p class="jc2"></p>
                        </div>
                        <div>
                            <p>竞猜奖励算力</p>
                            <p class="jc3"></p>
                        </div>
                    </div>
                    <p class="p1">
                        <span>总产出</span>
                        <span><span class="span7"></span>BTC</span>
                    </p>
                    <p class="p2">￥<span class="span8"></span></p>
                    <div class="p3">
                        <p class="p1">
                            <span>产出冻结</span>
                            <span><span class="span9"></span>BTC</span>
                        </p>
                        <p class="p2 ">￥<span class="span10"></span></p>
                    </div>
                </div>
            </div>
            <div class="clomn clomn3">
                <p class="clm_total">
                    不可回购算力<span class="power canGetPower span11">T</span>
                </p>
                <div class="clomn-content">
                    <p class="p1">
                        <span>总产出</span>
                        <span><span class="span12"></span>BTC</span>
                    </p>
                    <p class="p2">￥<span class="span13"></span></p>
                    <div class="p3 nottopradio">
                        <p class="p1">
                            <span>产出冻结</span>
                            <span><span class="span14"></span>BTC</span>
                        </p>
                        <p class="p2">￥<span class="span15"></span></p>
                    </div>
                    <div class="p3 notbotradio" style="margin-top: 0;padding-top: 0.1rem">
                        <p class="p1">
                            <span>算力宝补偿</span>
                            <span><span class="span16"></span>BTC</span>
                        </p>
                        <p class="p2">￥<span class="span17"></span></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script src="../../script/autosize.js"></script>
<script src="../../script/fastclick.js"></script>
<script src="../../script/jquery_three_two_one.js"></script>
<script src="../../script/app.js"></script>
<script>
    apiready = function () {
        var app = new APP();
        var account = app.getAccount();
        var pageParams = api.pageParam;
        var date = pageParams.date;//日期
        var item = pageParams.item;//当前矿机数据
        $(".rightDate").text(item.incomeDate);
        app.ajaxPro({
            url: "member/income-detail",
            values: {
                token: account.token,
                date: date,
                version: app.AV
            },
            openFlower: true
        }, function (ret) {
            console.log('ret+++++++++' + JSON.stringify(ret));
            if (ret.code == 200) {
                var data = ret.data;
                $(".totalPower").text(item.incomePower + 'T');//总算力
                $(".span1").text(item.num);//总产出
                $(".span2").text(item.total_price);//总产出价格
                $(".span3").text(item.insuranceFrozenIncomeNum);//冻结
                $(".span4").text(item.freeze_rmb);//总产出(含冻结） 价格
                $(".jc1").text(data.khgcysl + 'T');//合约持有算力
                var jcxhsl = data.jcxhsl;
                var fh = jcxhsl >= 0 ? '+' : '';
                $(".jc2").text(fh + jcxhsl + 'T').addClass(jcxhsl >= 0 ? 'red' : 'green');//竞猜消耗算力
                var fh2 = data.jcjlsl >= 0 ? '+' : '-';
                $(".jc3").text(fh2 + data.jcjlsl + 'T').addClass(data.jcjlsl >= 0 ? 'red' : 'green');//竞猜奖励算力
                var canGetBack = data.khgsl == 0 || data.khgsl == '--' ? '--' : data.khgsl + 'T';
                $(".span6").text(canGetBack);//可回购算力
                $(".span7").text(data.khgcc);//产出
                $(".span8").text(data.khg_price);//产出价格
                $(".span9").text(data.khgccdj);//可回购冻结
                $(".span10").text(data.khgdj_price);//可回购冻结价格
                $(".span11").text(data.bkhgcysl + 'T');//不可回购算力
                $(".span12").text(data.bbkhgcc);//不可 产出
                $(".span13").text(data.bkhg_price);//不可回购价格
                $(".span14").text(data.bkhgccdj);//不可回购算力 冻结
                $(".span15").text(data.bkhgdj_price);//不可回购算力 价格
                $(".span16").text(data.slbbc);//算力包产出
                $(".span17").text(data.slbbc_price);//算力包价格
            }
        })
    }
</script>